import { View, ScrollView, Text } from '@tarojs/components'
import HospitalCard from './HospitalCard'

const HospitalList = ({ 
  hospitalsData, 
  hospitalFilterTags, 
  activeFilter, 
  onFilterChange, 
  onHospitalClick 
}) => {
  console.log('=== HospitalList 组件渲染 ===')
  console.log('HospitalList props:', { hospitalsData, activeFilter, hospitalFilterTags })
  console.log('hospitalsData 类型:', typeof hospitalsData)
  console.log('hospitalsData 键:', Object.keys(hospitalsData || {}))
  console.log('hospitalsData 值:', hospitalsData)
  
  const currentHospitals = hospitalsData[activeFilter] || []
  console.log(`当前分类 ${activeFilter} 的医院数量:`, currentHospitals.length)
  console.log('当前分类医院数据:', currentHospitals)

  // 检查是否有任何分类有数据
  const hasAnyData = hospitalsData && Object.keys(hospitalsData).some(category => 
    hospitalsData[category] && hospitalsData[category].length > 0
  )

  if (!hasAnyData) {
    return (
      <View className='empty-state'>
        <Text>暂无医院数据</Text>
      </View>
    )
  }

  // 确保"推荐"标签在最左边
  const sortedFilterTags = [...hospitalFilterTags].sort((a, b) => {
    if (a === '推荐') return -1
    if (b === '推荐') return 1
    return 0
  })

  return (
    <>
      {/* 筛选标签 */}
      <ScrollView 
        className='filter-tags' 
        scrollX
        showScrollbar={false}
        enhanced
      >
        {sortedFilterTags.map((tag, index) => (
          <View 
            key={index} 
            className={`filter-tag ${activeFilter === tag ? 'active' : ''}`}
            onClick={() => onFilterChange(tag)}
          >
            <Text>{tag}</Text>
          </View>
        ))}
      </ScrollView>

      {/* 医院列表 */}
      <ScrollView className='hospital-list' scrollY>
        <View className='hospital-grid'>
          {currentHospitals.length > 0 ? (
            currentHospitals.map((hospital) => (
              <HospitalCard 
                key={hospital.id || hospital._id} 
                hospital={hospital} 
                onClick={onHospitalClick}
              />
            ))
          ) : (
            <View className='empty-state'>
              <Text>暂无{activeFilter}分类的医院</Text>
              <Text style={{fontSize: '12px', color: '#999', marginTop: '8px'}}>
                可用分类: {Object.keys(hospitalsData || {}).join(', ')}
              </Text>
            </View>
          )}
        </View>
      </ScrollView>
    </>
  )
}

export default HospitalList
